<template>
    <div class="coupon-list">
        <div class="mb10" v-for="(items, index) in couponList" :key="index">
            <div
                class="row coupon-item"
                :class="{
                    'coupon-item-gray': isUse || isExpired,
                    'coupon-list-item': !isUse && !isExpired,
                }"
            >
                <div class="price white column-center">
                    <div class="row xl">
                        <div style="margin-top: 7px">￥</div>
                        <!-- <div style="font-size: 30px;font-weight: bold">{{items.money}}</div> -->
                        <price-slice
                            :price="items.money"
                            firstClass="couponSize"
                        ></price-slice>
                    </div>
                    <div class="sm" style="margin-top: 4px">
                        {{ items.use_condition }}
                    </div>
                </div>
                <div class="info">
                    <div class="bold lg row" style="margin-bottom: 9px">
                        {{ items.name }}
                    </div>
                    <div class="sm lighter row">{{ items.use_time_tips }}</div>
                    <div class="row-between mt10">
                        <div class="xs lighter two-txt-cut">
                            {{ items.coupon_type }}
                        </div>
                        <div
                            class="row-center br60"
                            :class="{
                                'white bg-primary primary-btn':
                                    isCouponCenter && !isUse && !isExpired,
                                'bd-btn primary':
                                    !isCouponCenter && !isUse && !isExpired,
                                'gray-btn gray': isUse || isExpired,
                            }"
                            @click="getOrUseCoupon(items.id)"
                        >
                            {{
                                isCouponCenter
                                    ? "领取"
                                    : isUse
                                    ? "已使用"
                                    : isExpired
                                    ? "已过期"
                                    : "去使用"
                            }}
                        </div>
                    </div>
                </div>
                <img
                    class="receive"
                    src="@A/images/home_img_receive.png"
                    v-show="items.is_get == 1"
                />
            </div>
            <div
                class="tips-container bg-white"
                v-if="!isCouponCenter && items.tips.length > 0"
            >
                <div class="row-between header" @click="onShowTips(index)">
                    <div class="xs normal">使用说明</div>
                    <div class="arrow" :ref="'arrow' + index">
                        <img src="@A/images/arrow_up.png" />
                    </div>
                </div>
                <div class="tips xs mt5 muted" v-show="showTips[index] == 1">
                    {{ items.tips }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "CouponList",
    props: {
        couponList: {
            type: Array,
        },
        isCouponCenter: {
            type: Boolean,
            defalut: false,
        },
        isUse: {
            type: Boolean,
            default: false,
        },
        isExpired: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            showTips: [],
        };
    },
    watch: {},
    methods: {
        getOrUseCoupon(id) {
            if (this.isCouponCenter) {
                // 领券中心则发送领取事件
                this.$emit("receive", id);
            } else {
                // 若不是发送去使用事件
                this.$router.push({
                    name: "home",
                });
                this.$emit("COUPON_TO_USE", id);
            }
        },
        onShowTips(index) {
            this.showTips[index] = this.showTips[index] ? 0 : 1;
            this.showTips.splice(index, 0);
            if (this.showTips[index]) {
                this.$refs["arrow" + index][0].style.transform =
                    "rotate(-180deg)";
            } else {
                this.$refs["arrow" + index][0].style.transform = "rotate(0deg)";
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.coupon-list {
    padding: 10px 12px;
    .coupon-item {
        position: relative;
        background-size: 100% 100%;
        height: 100px;
        &.coupon-list-item {
            background-image: url();
        }
        &.coupon-item-gray {
            background-image: url();
        }
        .price {
            width: 100px;
            height: 100%;
        }
        .info {
            padding: 0 10px;
            flex: 1;
            .bd-btn {
                border: 1px solid $--color-primary;
                padding: 4px 10px;
                flex: none;
            }
            .primary-btn {
                padding: 3px 16px;
                flex: none;
            }

            .gray-btn {
                border: 1px solid #cccccc;
                padding: 3px 10px;
                flex: none;
            }
        }
        .receive {
            position: absolute;
            right: 15px;
            top: 0px;
            width: 50px;
            height: 40px;
        }
    }

    .tips-container {
        padding: 7px 10px;
        .header {
            .arrow {
                width: 15px;
                height: 15px;
                transform: rotate(0deg);
                transition: transform 0.5s;
                img {
                    width: 100%;
                    height: 100%;
                    flex: none;
                }
            }
        }
        .tips {
            text-align: left;
        }
    }
}
</style>
